<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>state标准版（完整）</title>
</head>
<body>
  <div id="test"></div>

  <!-- 引入库：先引入核心库，再引入操作DOM的扩展库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">    //必须写babel，因为默认js
    class Weather extends React.Component {

      //构造器使用几次？    ————1次，因为页面仅仅进行一次实例
      constructor(props){
        super(props)
        //初始化状态，这个{}是为了传入更多数据，所以用对象方式来写的
        this.state = {isHot:true,wind:'微风'}
        this.changeWeather2 = this.changeWeather1.bind(this)    
        //bind会返回一个新的函数，即使命名相同也是不一样的，这里为了区分更清楚，就命名changeWeather1和changeWeather2
        /*
          (1)this：实例对象的
          (2)this：原型的
          (3)this：函数指向修改，本来是原型，因为bind修改指向，所以现在函数指向实例对象
        */
      }

      //render使用几次？    ———— 1+n次， 1是初始化，n是状态更新次数
      render(){
        const {isHot,wind} = this.state
        return <h2 onClick={this.changeWeather2}>今天天气很{isHot?'炎热':'凉爽'},{wind}</h2>
      }

      //changeWeather调用几次？     —————— 点几次，调用几次
      changeWeather1(){
        //changeWeather放在哪里？   Weather的原型对象上，供实例使用
        //由于changeWeather是作为onClick的回调，所以不是作为实例调用，是直接调用
        //类中的方法默认开启局部的严格模式，所以changeWeather中的this是undefiled
        const isHot = this.state.isHot
        //特别注意：状态必须通过setState来进行更新，且更新是一种合并，而不是替换
        this.setState({isHot:!isHot})   //加{}是为了传输更多的数据
      }
    }

    /*
      强烈注意：
        1）组件中render的this是实例对象
        2）组件自定义的方法中this为undefiled，如何解决？
          a.  强制绑定this：通过函数对象的bind()
          b.  箭头函数
        3）状态数据，不能随便修改，需要用到setState
    */
    ReactDOM.render(<Weather/>, document.getElementById('test'))
  </script>
</body>
</html>